<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生在线考试系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="my/style.css">
</head>

<body class="d-flex vh-100 overflow-hidden">
<div class="d-flex flex-column flex-grow-1">
    <nav class="navbar navbar-expand navbar-dark bg-dark bg-gradient">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">学生在线考试系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item nav-link">
                        管理员端
                    </li>
                    <li class="nav-item nav-link">
                        2018年 9 月 9 日
                    </li>
                    <li class="nav-item nav-link">
                        22：22
                    </li>
                </ul>
                <div class="navbar-text">
                    当前用户：王铭
                </div>
                <div class="navbar-text">
                    <a class="nav-link">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <div class="d-flex">
        <div class="d-flex justify-content-center" style="width: 200px">
        <span class="fs-5 align-self-center" data-bs-toggle="collapse" data-bs-target="#main-list"
              aria-expanded="false">菜单</span>
        </div>
        <nav class="navbar navbar-light bg-light flex-grow-1">
            <div class="container-fluid">
                <span class="navbar-brand mb-0 h1">试题创编<button type="button" class="btn-close small"
                                                               aria-label="Close"></button></span>
            </div>
        </nav>
    </div>
    <div class="d-flex flex-grow-1 bg-info overflow-auto">
        <div class="border collapse" id="main-list" style="width: 200px;">
            <div id="admin-menu-list">
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#lm1">
                            用户管理
                        </div>
                    </h3>
                    <div id="lm1" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            学生列表
                        </div>
                        <div class="accordion-body">
                            教师列表
                        </div>
                        <div class="accordion-body">
                            管理员列表
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#lm2">
                            卷库管理
                        </div>
                    </h3>
                    <div id="lm2" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            试卷列表
                        </div>
                        <div class="accordion-body">
                            试卷创编
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#lm3">
                            题库管理
                        </div>
                    </h3>
                    <div id="lm3" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            题目列表
                        </div>
                        <div class="accordion-body">
                            题目创编
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#lm4">
                            个人中心
                        </div>
                    </h3>
                    <div id="lm4" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            账户信息
                        </div>
                        <div class="accordion-body">
                            修改密码
                        </div>
                    </div>
                </div>
            </div>

            <div id="teacher-menu-list">
                <div class="accordion-item">
                    <div class="accordion-body">
                        主页
                    </div>
                </div>

                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#tlm1">
                            考卷批改
                        </div>
                    </h3>
                    <div id="tlm1" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            待批改
                        </div>
                        <div class="accordion-body">
                            已批改
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#tlm2">
                            卷库管理
                        </div>
                    </h3>
                    <div id="tlm2" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            我的试卷
                        </div>
                        <div class="accordion-body">
                            试卷创编
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#tlm3">
                            班级管理
                        </div>
                    </h3>
                    <div id="tlm3" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            我的班级
                        </div>
                        <div class="accordion-body">
                            创建班级
                        </div>
                        <div class="accordion-body">
                            我的学生
                        </div>

                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#tlm4">
                            个人中心
                        </div>
                    </h3>
                    <div id="tlm4" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            账户信息
                        </div>
                        <div class="accordion-body">
                            修改密码
                        </div>
                    </div>
                </div>
            </div>

            <div id="student-menu-list">
                <div class="accordion-item">
                    <div class="accordion-body">
                        主页
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-body">
                        任务中心
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-body">
                        我的试卷
                    </div>
                </div>
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#slm1">
                            班级管理
                        </div>
                    </h3>
                    <div id="slm1" class="accordion-collapse collapse ">
                        <div class="accordion-body">
                            我的班级
                        </div>
                        <div class="accordion-body">
                            加入班级
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="main" class="bg-light flex-grow-1 p-2 overflow-auto">

            <!--在此处添加div-->

            <!--            学生列表-->
            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch" class="visually-hidden">查找学生：</label>
                        <input type="password" class="form-control" id="inputSearch" placeholder="姓名学号或联系方式">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                        <a class="btn btn-success mb-3 col-auto">新增学生</a>
                    </div>
                </form>

                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            性别
                        </th>
                        <th>
                            联系方式
                        </th>
                        <th>
                            状态
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            男
                        </td>
                        <td>
                            119
                        </td>
                        <td>
                            启用
                        </td>
                        <td>
                            编辑 禁用 删除
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            学生信息更改(学生管理员通用)-->
            <form class="container-fluid form-student-info">
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputName">学生姓名：</label>
                    <input id="inputName" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputSex">性别：</label>
                    <input id="inputSex" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPwd">密码：</label>
                    <input id="inputPwd" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPhone">手机：</label>
                    <input id="inputPhone" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputEmail">电子邮箱：</label>
                    <input id="inputEmail" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <div class="col-5"></div>
                    <input type="reset" class="btn col-auto" value="重置"/>
                    <input type="submit" class="btn btn-primary col-auto" value="提交"/>
                </div>
            </form>

            <!--            教师列表-->
            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch" class="visually-hidden">查找教师：</label>
                        <input type="password" class="form-control" id="inputSearch2" placeholder="教师姓名">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                        <a class="btn btn-success mb-3 col-auto">新增教师</a>
                    </div>
                </form>
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            性别
                        </th>
                        <th>
                            年龄
                        </th>
                        <th>
                            职位
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            男
                        </td>
                        <td>
                            119
                        </td>
                        <td>
                            讲师
                        </td>
                        <td>
                            编辑 删除
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            管理员列表-->
            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch" class="visually-hidden">查找教师：</label>
                        <input type="password" class="form-control" id="inputSearch3" placeholder="管理员姓名">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                    </div>
                </form>
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            性别
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            男
                        </td>
                        <td>
                            删除
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            教师信息修改-->
            <form class="container-fluid form-student-info">
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputName">教师姓名：</label>
                    <input id="inputName1" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputSex">性别：</label>
                    <input id="inputSex1" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPwd">密码：</label>
                    <input id="inputPwd1" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPhone">职位</label>
                    <input id="inputPhone1" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputEmail">年龄</label>
                    <input id="inputEmail1" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <div class="col-5"></div>
                    <input type="reset" class="btn col-auto" value="重置"/>
                    <input type="submit" class="btn btn-primary col-auto" value="提交"/>
                </div>
            </form>

            <!--            教师考卷列表-->
            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch" class="visually-hidden">查找试卷</label>
                        <input type="password" class="form-control" id="inputSearch4" placeholder="查找班级或纸卷名称">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                    </div>
                </form>

                <div class="row justify-content-center">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                软件工程Java一班
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">应做35人</p>
                                <p class="card-text">已做30人</p>
                            </div>
                            <div class="card-footer text-muted text-end">
                                <a href="#" class="btn">自动批改</a>
                                <a href="#" class="btn">查看成绩</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                软件工程Java一班
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">应做35人</p>
                                <p class="card-text">已做30人</p>
                            </div>
                            <div class="card-footer text-muted text-end">
                                <a href="#" class="btn">自动批改</a>
                                <a href="#" class="btn">查看成绩</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                软件工程Java一班
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">应做35人</p>
                                <p class="card-text">已做30人</p>
                            </div>
                            <div class="card-footer text-muted text-end">
                                <a href="#" class="btn">自动批改</a>
                                <a href="#" class="btn">查看成绩</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                软件工程Java一班
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">应做35人</p>
                                <p class="card-text">已做30人</p>
                            </div>
                            <div class="card-footer text-muted text-end">
                                <a href="#" class="btn">自动批改</a>
                                <a href="#" class="btn">查看成绩</a>
                            </div>
                        </div>

                    </div>

                </div>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--            密码修改(学生教师管理员通用)-->
            <form class="container-fluid form-student-info">
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputName">原密码</label>
                    <input id="inputPwd0" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPwd">新密码：</label>
                    <input id="inputPwd01" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <label class="col-2 col-form-label" for="inputPhone">确认新密码:</label>
                    <input id="inputPwd02" type="text" class="col-7"/>
                </div>
                <div class="row justify-content-center">
                    <div class="col-5"></div>
                    <input type="submit" class="btn btn-primary col-auto" value="提交"/>
                </div>
            </form>

            <!--            教师考卷列表查看-->
            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch5" class="visually-hidden">查找学生：</label>
                        <input type="password" class="form-control" id="inputSearch5" placeholder="姓名学号或联系方式">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                        <a class="btn btn-success mb-3 col-auto">新增学生</a>
                    </div>
                </form>

                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            姓名
                        </th>
                        <th>
                            得分
                        </th>
                        <th>
                            概要
                        </th>
                        <th>
                            耗时
                        </th>
                        <th>
                            提交时间
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            Tom
                        </td>
                        <td>
                            70
                        </td>
                        <td>
                            7/10
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            2018/9/2
                        </td>
                        <td>
                            <a class="link-dark text-decoration-none">
                                查看做题详情
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            教师考卷详情查看，学生通用-->
            <div class="container-fluid">
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">
                            1.
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                            <p>正确答案：<span>D</span></p>
                            <p>学生答案：<span>D</span></p>
                            <p>得分：<span>3</span></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">
                            1.
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                            <p>正确答案：<span>D</span></p>
                            <p>学生答案：<span>D</span></p>
                            <p>得分：<span>3</span></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">
                            1.
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                            <p>正确答案：<span>D</span></p>
                            <p>学生答案：<span>D</span></p>
                            <p>得分：<span>3</span></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">
                            1.
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                            <p>正确答案：<span>D</span></p>
                            <p>学生答案：<span>D</span></p>
                            <p>得分：<span>3</span></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">
                            1.
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                            <p>正确答案：<span>D</span></p>
                            <p>学生答案：<span>D</span></p>
                            <p>得分：<span>3</span></p>
                        </td>
                    </tr>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            教师试卷列表查看-->
            <div class="container-fluid">
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            名称
                        </th>
                        <th>
                            班级
                        </th>
                        <th>
                            创建时间
                        </th>

                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            形势与政策考试
                        </td>
                        <td>
                            软件工程Java一班
                        </td>
                        <td>
                            2020/9/2
                        </td>
                        <td>
                            <a class="link-dark text-decoration-none">
                                编辑
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!--            教师试卷创编-->
            <div class="container-fluid">
                <form class="row g-3">
                    <div class="col-12">
                        <label for="inputAddress" class="form-label">试卷名</label>
                        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                    </div>
                    <div class="col-md-4">
                        <label for="inputState" class="form-label">试卷类型</label>
                        <select id="inputState" class="form-select">
                            <option selected>限时任务试卷（学生在时间段内考试）</option>
                            <option>定时任务试卷（学生定时考试）</option>
                            <option>普通任务试卷（学生在截止时间前完成考试）</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">所属班级</label>
                        <select class="form-select">
                            <option selected>...</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">开始日期</label>
                        <input type="date" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">时间</label>
                        <input type="time" class="form-control">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">结束日期</label>
                        <input type="date" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">时间</label>
                        <input type="time" class="form-control">
                    </div>


                    <div class="col-12">
                        <label for="inputAddress2" class="form-label">建议时间</label>
                        <input type="text" class="form-control" id="inputAddress2"
                               placeholder="Apartment, studio, or floor">
                    </div>
                    <div class="col-12">
                        <div class="form-check">
                            <a class="btn bg-info">添加考题</a><span>共 <span>0</span> 道题。</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <button type="submit" class="btn btn-primary">保存为新试卷</button>
                        <button type="reset" class="btn btn-secondary">重置</button>

                    </div>
                </form>
            </div>

            <!--            教师题库列表，通用于试卷添加题目-->
            <div class="container-fluid">

                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">
                            ID1001
                        </td>
                        <td>
                            <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                            <div class="row">
                                <p class="col">
                                    <span>A.</span>
                                    新型城镇化、信息化、工业化、农业现代化化</p>
                                <p class="col">
                                    <span>B.</span>
                                    新型城市化、现代化、信息化、工业化</p>
                                <p class="col">
                                    <span>C.</span>
                                    新型工业化、农业现代化、信息化、城镇化</p>
                                <p class="col">
                                    <span>D.</span>
                                    新型工业化、信息化、城镇化、农业现代化</p>
                            </div>
                        </td>
                        <td>
                            <a class="link-dark text-decoration-none">编辑</a>
                            <a class="link-danger text-decoration-none">删除</a>
                            <a class="link-dark text-decoration-none">添加此题</a>
                        </td>
                    </tr>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--            教师题目创编，编辑题目通用-->
            <div class="container-fluid">
                <form class="row g-3">
                    <div class="col-12">
                        <label class="form-label">题面</label>
                        <textarea class="form-control" rows="5"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label for="inputState" class="form-label">题目类型</label>
                        <select class="form-select">
                            <option selected>单选题</option>
                            <option>多选题</option>
                            <option>判断题</option>
                            <option>填空题</option>
                            <option>简答题</option>
                        </select>
                        <button class="btn btn-secondary">添加选项</button>
                    </div>

                    <div class="row">
                        <div class="col-md-2">
                            <label class="form-label">选项</label>
                            <input type="text" class="form-control" placeholder="ABC。。">
                        </div>


                        <div class="col-md-6">
                            <label class="form-label">选项内容</label>
                            <input type="text" class="form-control" placeholder="1234 Main St">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">设置答案</label>
                        <input type="text" class="form-control" placeholder="1234 Main St">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <button type="submit" class="btn btn-primary">保存为新题目</button>
                        <button type="reset" class="btn btn-secondary">重置</button>

                    </div>
                </form>

            </div>

            <!--            教师班级列表，学生通用-->
            <div class="container-fluid">
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            班级名称
                        </th>
                        <th>
                            班级代码
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            形势与政策一班
                        </td>
                        <td>
                            12345
                        </td>
                        <td>
                            <a class="link-dark text-decoration-none">
                                编辑
                            </a>
                            <a class="link-danger text-decoration-none">
                                删除
                            </a>
                            <a class="link-danger text-decoration-none">
                                退出班级
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--            教师创编班级-->
            <div class="container-fluid">
                <form class="row g-3">
                    <div class="col-md-12">
                        <label for="formGroupExampleInput" class="form-label">班级名称</label>
                        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
                    </div>
                    <div class="col-md-12">
                        <label for="formGroupExampleInput2" class="form-label">班级代码</label>
                        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="">
                    </div>


                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <button type="submit" class="btn btn-primary">保存为新班级</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>

            <!--            学生任务列表-->
            <div class="container-fluid">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">开始时间</p>
                                <p class="card-text">截止时间</p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">现在做</a>
                            </div>
                        </div>
                    </div>
                </div>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--            学生做题界面-->
            <div class="container-fluid">
                <div class="row justify-content-end">
                    <a class="col-2 btn-secondary btn ">交卷</a>
                </div>
                <form class="row g-3">
                    <div class="row g-3">
                        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                            <div class="btn-group" role="group" aria-label="First group">
                                <button type="button" class="btn btn-outline-secondary">1</button>
                                <button type="button" class="btn btn-outline-secondary">2</button>
                                <button type="button" class="btn btn-outline-secondary">3</button>
                                <button type="button" class="btn btn-outline-secondary">4</button>
                                <button type="button" class="btn btn-outline-secondary">1</button>
                                <button type="button" class="btn btn-outline-secondary">2</button>
                                <button type="button" class="btn btn-outline-secondary">3</button>
                                <button type="button" class="btn btn-outline-secondary">4</button>
                            </div>

                        </div>
                    </div>
                    <p><span>1. </span>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            A
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="">
                        <label class="form-check-label" for="flexCheckDefault">
                            B
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="">
                        <label class="form-check-label" for="flexCheckDefault">
                            C
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="">
                        <label class="form-check-label" for="flexCheckDefault">
                            D
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="flexRadioDefault">
                        <label class="form-check-label" for="flexRadioDefault1">
                            A
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="flexRadioDefault">
                        <label class="form-check-label" for="flexRadioDefault1">
                            B
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="flexRadioDefault">
                        <label class="form-check-label" for="flexRadioDefault1">
                            C
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                        <label class="form-check-label" for="flexRadioDefault1">
                            D
                        </label>
                    </div>
                    <div class="col-12">
                        <textarea class="form-control" rows="5"></textarea>
                    </div>
                    <nav>
                        <ul class="pagination justify-content-end">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一题</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一题</a>
                            </li>
                        </ul>
                    </nav>
                </form>
            </div>

            <!--            学生考卷列表-->
            <div class="container-fluid">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-header">
                                限时考试
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">软件工程章测试</h5>
                                <p class="card-text">时间 60分钟</p>
                                <p class="card-text">得分<span>80</span></p>
                            </div>
                            <div class="card-footer text-right">
                                <a href="#" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--            学生加入班级-->
            <div class="container-fluid d-flex flex-column ">
                <form class="row justify-content-center">
                    <div class="col-md-7">
                        <label for="formGroupExampleInput" class="form-label">班级代码:</label>
                        <input type="text" class="form-control mb-3" placeholder="">
                        <button type="submit" class="btn btn-primary">加入</button>
                    </div>
                </form>
            </div>

            <div class="container-fluid">
                <form class="row justify-content-center">
                    <div class="col-5">
                        <label for="inputSearch" class="visually-hidden">查找学生：</label>
                        <input type="password" class="form-control" placeholder="输入班级代码查找">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查找</button>
                    </div>
                </form>

                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            性别
                        </th>
                        <th>
                            联系方式
                        </th>
                        <th>
                            所属班级
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            男
                        </td>
                        <td>
                            119
                        </td>
                        <td>
                            软件工程Java一班
                        </td>
                        <td>
                            移出此班
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</div>
</body>

</html>